

/*
react中性能优化的方案
1.should Component Update
控制组件自身或者子组件是否需要更新，尤其在子组件非常多的情况下，需要进行优化。
2.Pure Component
Pure Component会帮你比较新props跟I旧的props，新的state和老的state（值相等，或者
对象含有相同的属性、且属性值相等），决定should component Update返回true或者
false，从而决定要不要呼叫render function。
注意
如果你的state或props『永远都会变』，那Pure Component并不会比较快，因为
shallow Equal也需要花时间。
*/


import React, {Component, PureComponent} from 'react';
class App extends PureComponent {
    state={
        name:'哈哈哈',
    }

    render() {
        console.log('render')
        return (
            <div>
                <div id='name'>{this.state.name}</div>
                <button onClick={()=>{
                    this.setState({
                        name:'冲冲冲'
                    })
                }}>click</button>
            </div>
        );
    }

    //组件应该更新吗
    //性能优化函数
    /*shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log(nextProps)
        console.log(nextState)
        console.log(nextContext)
        // return true;//应该更新
        // return false;//应该不更新
        // if(nextState.list.length>0){
        //     return true
        // }

        if(JSON.stringify(this.state)!==JSON.stringify(nextState)){
            return true
        }

        return false
    }*/
}

export default App;
